@model WorkflowIndexViewModel
@using OrchardCore.Workflows.Models;
@using OrchardCore.Workflows.ViewModels;

@{
    int startIndex = (Model.Pager.Page - 1) * (Model.Pager.PageSize) + 1;
    int endIndex = startIndex + Model.Workflows.Count - 1;
}
<script asp-name="bootstrap-select" depends-on="admin" at="Foot"></script>
<style asp-name="bootstrap-select"></style>

<h1>@RenderTitleSegments(T["{0} Workflows", Model.WorkflowType.Name])</h1>
<zone name="Breadcrumbs">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a asp-action="Index" asp-controller="WorkflowType">@T["Workflow Types"]</a></li>
            <li class="breadcrumb-item"><a asp-action="Edit" asp-controller="WorkflowType" asp-route-id="@Model.WorkflowType.Id">@Model.WorkflowType.Name</a></li>
            <li class="breadcrumb-item active" aria-current="page">@T["Workflows"]</li>
        </ol>
    </nav>
</zone>

<form asp-action="Index" id="workflows-form" method="post">
    <input type="submit" name="submit.Filter" id="submitFilter" class="d-none" />
    <input type="submit" name="submit.BulkAction" class="d-none" />
    <input asp-for="Options.BulkAction" type="hidden" />

    <div class="form-group">
        <ul class="list-group with-checkbox">
            <li class="list-group-item bg-light">
                <div class="row">
                    <div class="form-group col mb-n1 text-nowrap">
                        <div class="custom-control custom-checkbox mt-2 mr-n2">
                            <input type="checkbox" class="custom-control-input" id="select-all">
                            <label class="custom-control-label" for="select-all" id="select-all-label" title="@T["Select All"]"></label>
                            <label id="items" for="select-all">@T.Plural(Model.Workflows.Count, "1 item", "{0} items")<span class="text-muted" title="@T["Items {0} to {1}", startIndex, endIndex]">@T.Plural((int)Model.Pager.TotalItemCount, " / {0} item in total", " / {0} items in total")</span></label>
                            <label id="selected-items" class="text-muted" for="select-all"></label>
                        </div>
                    </div>
                    <div class="form-group col-2 mb-n1" style="display:none" id="actions">
                        <span class="dropdown float-right mt-1">
                            <button class="btn btn-sm btn-light dropdown-toggle" type="button" id="bulk-action-menu-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                @T["Actions"]
                            </button>
                            <span class="dropdown-menu dropdown-menu-right" aria-labelledby="bulk-action-menu-button">
                                @foreach (var item in Model.Options.WorkflowsBulkAction)
                                {
                                    <a class="dropdown-item" href="javascript:void(0)" data-action="@item.Value" data-title="@T["Bulk Action"]" data-message="@T["Are you sure you want to {0} these items?", @item.Text.ToLower()]">@item.Text</a>
                                }
                            </span>
                        </span>
                    </div>
                    <div class="form-group col mb-n1 filter">
                        <div class="btn-group float-right mt-1">
                            <select asp-for="Options.Filter" asp-items="Model.Options.WorkflowsStatuses" class="selectpicker show-tick mr-2" data-header="@T["Filter by status"]" data-live-search="true" data-selected-text-format="static" data-dropdown-align-right="true" data-width="fit" title="@T["Status"]" data-style="btn-sm">
                            </select>
                            <select asp-for="Options.OrderBy" asp-items="@Model.Options.WorkflowsSorts" class="selectpicker show-tick" data-header="@T["Sort by"]" data-width="fit" data-selected-text-format="static" data-dropdown-align-right="true" title="@T["Sort"]" data-style="btn-sm"></select>
                        </div>
                    </div>
                </div>
            </li>
            @if (Model.Workflows.Any())
            {
                @for (var i = 0; i < Model.Workflows.Count; i++)
                {
                    var entry = Model.Workflows[i];
                    var statusCss = "";

                    switch (entry.Workflow.Status)
                    {
                        case WorkflowStatus.Aborted:
                            statusCss = "warning";
                            break;
                        case WorkflowStatus.Idle:
                        default:
                            statusCss = "secondary";
                            break;
                        case WorkflowStatus.Finished:
                            statusCss = "success";
                            break;
                        case WorkflowStatus.Executing:
                        case WorkflowStatus.Halted:
                        case WorkflowStatus.Resuming:
                        case WorkflowStatus.Starting:
                            statusCss = "info";
                            break;
                        case WorkflowStatus.Faulted:
                            statusCss = "danger";
                            break;
                    }

                    <li class="list-group-item">
                        <div class="properties">
                            <div class="related">
                                <a asp-action="Delete" asp-route-id="@entry.Workflow.Id" class="btn btn-danger btn-sm" itemprop="RemoveUrl UnsafeUrl">@T["Delete"]</a>
                            </div>

                            <div class="custom-control custom-checkbox float-left">
                                <input type="checkbox" class="custom-control-input" value="@entry.Workflow.Id" name="itemIds" id="itemIds-@entry.Workflow.Id">
                                <label class="custom-control-label" for="itemIds-@entry.Workflow.Id"></label>
                            </div>
                            <a asp-action="Details" asp-route-id="@entry.Workflow.Id">@entry.Workflow.WorkflowId</a>
                            <div>
                                <span class="hint">@T["Created {0}", (object)(await DisplayAsync(await New.TimeSpan(Utc: entry.Workflow.CreatedUtc)))]</span>
                                <div class="info">
                                    <span class="badge badge-@statusCss">
                                        @entry.Workflow.Status.GetLocalizedStatus(T)
                                    </span>
                                </div>
                            </div>
                        </div>
                    </li>
                }
            }
            else
            {
                <li class="list-group-item">
                    <div class="alert alert-info" role="alert">
                        @T["<strong>Nothing here!</strong> There are no halted workflows at the moment."]
                    </div>
                </li>
            }
        </ul>
        @await DisplayAsync(Model.Pager)
    </div>
</form>

<div class="form-group">
    <a class="btn btn-secondary" href="@Model.ReturnUrl">@T["Back"]</a>
</div>

<script at="Foot" type="text/javascript">
    $(function () {
        $('.selectpicker').selectpicker();

        var actions = $("#actions");
        var items = $("#items");
        var filters = $(".filter");
        var selectAllCtrl = $("#select-all");
        var selectedItems = $("#selected-items");
        var itemsCheckboxes = $(":checkbox[name='itemIds']");

        $(".filter-options input").on("change", function () {
            $("[name='submit.Filter']").click();
        });

        $('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
            $("[name='submit.Filter']").click();
        });

        $(".dropdown-menu .dropdown-item").filter(function() {
            return $(this).data("action");
        }).on("click", function () {
            if ($(":checkbox[name='itemIds']:checked").length > 1) {
                var $this = $(this);
                confirmDialog({title: $this.data('title'), message: $this.data('message'), callback: function(r) {
                    if (r) {
                        $("[name='Options.BulkAction']").val($this.data("action"));
                        $("[name='submit.BulkAction']").click();
                    }
                }});
            }
        });

        function displayActionsOrFilters() {
            if ($(":checkbox[name='itemIds']:checked").length > 1) {
                actions.show();
                filters.hide();
                selectedItems.show();
                items.hide();
            }
            else {
                actions.hide();
                filters.show();
                selectedItems.hide();
                items.show();
            }
        }

        selectAllCtrl.click(function(){
            itemsCheckboxes.not(this).prop("checked", this.checked);
            selectedItems.text($(":checkbox[name='itemIds']:checked").length + ' @T["selected"]');
            displayActionsOrFilters();
        });

        itemsCheckboxes.on("click", function () {
            var itemsCount = $(":checkbox[name='itemIds']").length;
            var selectedItemsCount = $(":checkbox[name='itemIds']:checked").length;

            selectAllCtrl.prop("checked", selectedItemsCount == itemsCount);
            selectAllCtrl.prop("indeterminate", selectedItemsCount > 0 && selectedItemsCount < itemsCount);

            selectedItems.text(selectedItemsCount + ' @T["selected"]');
            displayActionsOrFilters();
        });
    });
</script>
